<template>
  <div class="layout-example">
    <!-- 左侧菜单 -->
    <div class="sidebar">
      <Menu
        :menu-data="menuData"
        :active-key="activeMenuKey"
        :collapse="isCollapse"
        @menu-select="handleMenuSelect"
      />
    </div>

    <!-- 右侧内容区 -->
    <div class="main-content">
      <div class="header">
        <button @click="toggleCollapse">
          {{ isCollapse ? '展开' : '折叠' }}
        </button>
        <span>当前页面: {{ currentPage }}</span>
      </div>
      <div class="content">
        <p>这是一个使用解耦菜单组件的布局示例</p>
        <p>菜单组件不再依赖路由，完全通过数据驱动</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Menu, MenuAdapter, type MenuItem } from '@/components/Menu'
import { ref, computed } from 'vue'
import { usePermissionStore } from '@/store/modules/permission'

const permissionStore = usePermissionStore()

// 菜单状态
const isCollapse = ref(false)
const activeMenuKey = ref('/dashboard')
const currentPage = ref('仪表盘')

// 使用适配器将路由数据转换为菜单数据
const menuData = computed(() => {
  return MenuAdapter.fromRoutes(permissionStore.getRouters)
})

// 切换菜单折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 处理菜单选择
const handleMenuSelect = (item: MenuItem, key: string) => {
  console.log('选中菜单项:', item, '键值:', key)

  // 更新当前页面标题
  if (item.title) {
    currentPage.value = item.title
  }

  // 更新激活的菜单项
  activeMenuKey.value = key

  // 这里可以添加路由跳转逻辑
  // if (item.path) {
  //   router.push(item.path)
  // }
}
</script>

<style scoped>
.layout-example {
  display: flex;
  height: 100vh;
}

.sidebar {
  flex-shrink: 0;
  background-color: #001529;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
}

.header {
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
}

.header button {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.header button:hover {
  background-color: #40a9ff;
}

.content {
  flex: 1;
  padding: 20px;
}

.content p {
  margin: 10px 0;
  color: #666;
}
</style>
